<template>
  <div>
    <div>
      <table border="1" cellpadding="0" cellspacing="0">
        <tr bgcolor="#ffc0cb">
          <th class="navId">ID</th>
          <th class="navName">导航名字</th>
          <th class="navUri">导航地址</th>
          <th class="navImg">导航图片</th>
          <th class="navButton">操作</th>
        </tr>
        <tr>
          <td class="navId"></td>
          <td class="navName">
            <input class="upData" v-model="navName">
          </td>
          <td class="navUri">
            <input class="upData" v-model="navUrl">
          </td>
          <td class="navImg">
            <div v-if="navImg==='https://www.edevplat.com/default.webp' || navImg===''">
              <img :src="navImg" height="50px" title="默认图片">
              <form @submit.prevent="uploadFile">
                <input type="file" ref="fileInput" accept="image/*">
                <button type="submit">上传图片</button>
              </form>
            </div>
            <div v-else>
              <img :src="navImg" height="50px" alt="">
            </div>
          </td>
          <td class="navButton">
            <input type="button" value=" 添加 " @click="update">
          </td>
        </tr>
        <tr v-for="(index,key) in datas" :key="key">
          <td class="navId">{{index.id}}</td>
          <td class="navName">{{index.name}}</td>
          <td class="navUri">{{index.url}}</td>
          <td class="navImg">
            <img :src="index.img" height="30px" :alt="index.name">
          </td>
          <td class="navButton">
            <input type="button" value=" 删除 " @click="del(index.id)">
          </td>
        </tr>
      </table>
    </div>
  </div>
</template>

<script>
import Cookies from "js-cookie";
import {ApiConfig} from "@/config/AxiosApi";

export default {
  name: "AddCollect",
  created() {
    if (!Cookies.get("token")) {
      this.$router.push("/login")
    }
    this.$axios.get(ApiConfig["getcollect"],{
      params: {
        userid: Cookies.get("user"),
        token: Cookies.get("token")
      }
    })
        .then(res=>{
          this.datas = res["data"]
        })
        .catch(err=>{
          console.log(err)
        })
  },
  data(){
    return{
      datas: {},
      navName:"",
      navUrl:"",
      navImg:"https://www.edevplat.com/default.webp",
    }
  },
  methods:{
    update(){
      if (this.navName === "" || this.navUrl === "" || this.navImg === ""){
        alert("请输入完整的信息")
        return
      }
      this.$axios.post(ApiConfig["postcollect"],
          {
            "userid": Cookies.get("user"),
            "token": Cookies.get("token"),
            "navname": this.navName,
            "url": this.navUrl,
            "img": this.navImg
      })
          .then(res=>{
            alert(res["data"]["msg"])
            this.navName =""
            this.navUrl = ""
            this.navImg = "https://www.edevplat.com/default.webp"
            this.refresh()
          })
          .catch(err=>{
            console.log(err)
          })

    },
    del(navID){
      this.$axios.post(ApiConfig["delcollect"],
          {
          "navid": navID,
          "token": Cookies.get("token"),
          "userid": Cookies.get("user")
          })
          .then(res=>{
            alert(res["data"])
            this.refresh()
          })
          .catch(err=>{
            console.log(err)
          })
    },
    refresh(){
      this.$axios.get(ApiConfig["getcollect"],{
        params: {
          userid: Cookies.get("user"),
          token: Cookies.get("token")
        }
      })
          .then(res=>{
            this.datas = res["data"]
          })
          .catch(err=>{
            console.log(err)
          })
    },
    uploadFile() {
      const file = this.$refs.fileInput.files[0];
      const formData = new FormData();
      formData.append('file', file);
      this.$axios.post(ApiConfig["upuserimage"], formData)
          .then(response => {
            this.navImg = response.data
          })
          .catch(error => {
            console.log(error);
          });
    }
  }
}
</script>

<style scoped>
table{
  margin: 100px auto;
  color: white;
  text-align: center;
}
table > tr > td{
  padding: 16px;
}
.navId{
  width: 10px;
}
.navName{
  width: 90px;
}
.navUri{
  width: 210px;
}
.navImg{
  width: 360px;
}
.navButton{
  width: 50px;
}
.upData{
  height: 30px;
  font-size: 14px;
}
</style>